<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>设置几何图形样式</title>
    <link rel="stylesheet" href="../v6.4.3/css/ol.css">
    <link rel="stylesheet" href="css/common.css">
  </head>
  <body>
    <div id="map" style="height: 90%;"></div>
    <label>Shape type &nbsp;</label>
    <select name="" id="type">
      <option value="">Select</option>
      <option value="Point">Point</option>
      <option value="LineString">LineString</option>
      <option value="Polygon">Polygon</option>
      <option value="Circle">Circle</option>
      <option value="Square">Square</option>
      <option value="Box">Box</option>
      <option value="None">None</option>
    </select>

    <script src="../v6.4.3/build/ol.js"></script>
    <script>
      
      let mapLayer = new ol.layer.Tile({
        source: new ol.source.OSM()
      })
      let mapView = new ol.View({
        projection: 'EPSG:3857',
        center: [0, 0],
        zoom: 0
      })
      let vectorSource = new ol.source.Vector()
      // 圆形样式
      let styleCircle = new ol.style.Circle({
        fill: new ol.style.Fill({
          color: 'rgba(166,166,166,.1)'
        }),
        radius: 5
      })
      let styleStroke = new ol.style.Stroke({
        color: 'rgba(166,166,166,.1)',
        lineCap: 'round',
        width: 5
      })
      let styleFill = new ol.style.Fill({
        color: 'rgba(0,0,0,.2)'
      })

      let vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: new ol.style.Style({
          image: styleCircle,
          stroke: styleStroke,
          fill: styleFill
        })
      })

      let map = new ol.Map({
        target: 'map',
        layers: [ mapLayer, vectorLayer ],
        view: mapView
      })

      let typeSelect = document.getElementById('type');
      let draw;
      function addInteraction(){
          let type = typeSelect.value;
          if(type !== 'None'){
              let geometryFunction;
              switch(type){   
                  case "Square": 
                      type = 'Circle';
                      // 生成规则的四边形的图形函数
                      geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
                      break;
                  case 'Box':
                      type = 'Circle';
                      // 生成盒形状的图形函数
                      geometryFunction = ol.interaction.Draw.createBox();
                      break;
                  default:break;
              }
              
              // 初始化Draw绘图控件
              console.log(type);
              draw = new ol.interaction.Draw({
                  source: vectorSource,
                  type: type,
                  geometryFunction: geometryFunction
              });
              // 将Draw绘图控件加入Map对象
              map.addInteraction(draw);
          }
      }

      typeSelect.addEventListener('change', () => {
          // 移除Draw绘图控件
          map.removeInteraction(draw);
          addInteraction();
      });

      // addInteraction();

    </script>
  </body>
</html>